<template>
  <div class="app-container p-rel">
    <div class="container-title">待办事项</div>

    <ul class="tabs">
      <li v-for="(tab, index) in tabs" :key="index" :class="{'active': activeIndex === index}" @click="selectTab(index)">
        {{ tab }}
      </li>
    </ul>
    <fsws-table v-if="activeIndex == 0"></fsws-table>
    <jcyj-table  v-if="activeIndex == 1"></jcyj-table>
    <pxkh-table  v-if="activeIndex == 2"></pxkh-table>
    <fsryjkz-table  v-if="activeIndex == 3"></fsryjkz-table>
    <jcbgtx-table  v-if="activeIndex == 4"></jcbgtx-table>
  </div>
</template>

<script>
import fswsTable from './fswsTable.vue'
import jcyjTable from './jcyjTable.vue'
import pxkhTable from './pxkhTable.vue'
import fsryjkzTable from './fsryjkzTable.vue'
import jcbgtxTable from './jcbgtxTable.vue'
export default {
  components:{ fswsTable, jcyjTable, pxkhTable, fsryjkzTable,jcbgtxTable },
  data() {
    return {

      tabs: ['放射卫生代办提醒', '放射人员培训考核提醒','放射人员健康检查提醒','超出许可范围','检测报告提醒'],
      activeIndex: 0,
    };
  },
  methods: {

    /** tab选中*/
    selectTab(index) {
      this.activeIndex = index;
    },
  }
};
</script>
<style scoped="scoped" lang="scss">
// 清除内外边距
.tabs {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.tabs li {
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
  border: 1px solid #1685fc;
  color:#1685fc;
  border-radius: 2px;

}

.tabs li.active {
  background-color: #1685fc;
  color: #ffffff;
}
</style>
